<template>
  <div class="strut-div">
    <div :id="config.option.id" class="strut-div"></div>
  </div>
</template>

<script>
  import echarts from 'echarts';
	import autoHover from '../../util/autoHover.js';	
  export default {
    name: "CommonDoughnutChart",
    props: ['config'],
    data() {
      return {
        chart: null,
				timeTicket:null,
      }
    },
    methods: {
      initChart() {
        let option = {
          color: ['#1E558E', '#0D699A', '#0E759D', '#10919F', '#07CBD9'],
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            x: 165,
            y: 40,
            data: ['因病致贫', '因灾致贫', '因学致贫', '因劳动能力致贫', '因其他原因致贫'],
            textStyle: {
              color: '#E9F4FF',
              fontsize: '8'
            }
          },
          series: [
            {
              name: '致贫原因',
              type: 'pie',
              radius: ['35%', '60%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '13',
                    fontWeight: 'bold',
                    color: '#E9F4FF'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              center: ["30%", "50%"],
              data: [
                {value: 335, name: '因病致贫'},
                {value: 310, name: '因灾致贫'},
                {value: 234, name: '因学致贫'},
                {value: 135, name: '因劳动能力致贫'},
                {value: 1548, name: '因其他原因致贫'}
              ]
            }
          ]
        };
        setTimeout(() => {
          // option.legend.data = this.config.option.legend.data;
          //
          // option.series[0].data = this.config.option.data;
          this.chart.setOption(option);
					this.timeTicket = autoHover.autoHover(this.chart,option,option.series[0].data.length);
        }, 300);

      },
      refreshChart() {

      },
    },
    mounted() {
      this.chart = echarts.init(document.getElementById(this.config.option.id));
    },
		beforeDestroy() {
			autoHover.stopHover(this.timeTicket);
		}

  }
</script>

<style scoped lang="scss" type="text/scss">

</style>
